<template>
	<view class="page-view">

		<view class="top">
			<u-navbar :title="stepList[step]&&stepList[step].title || orderDetail.status_name" :background="{
					backgroundColor: 'transparent'
				}" :border-bottom="false" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>

			<view class="tips-box" v-if="step==2 && orderDetail.order_info">
				还剩<u-count-down bg-color="transparent" color="#ffffff" separator-color="#ffffff" separator-size="24"
					font-size="24" :timestamp="orderDetail.order_info.out_time" :show-days="false"></u-count-down>订单自动取消
			</view>


			<view class="tips-box" v-if="orderDetail.status==4">
				还剩<u-count-down bg-color="transparent" color="#ffffff" separator-color="#ffffff" separator-size="24"
					font-size="24" :timestamp="orderDetail.auto_finish" :show-days="false"></u-count-down>订单自动确认完成
			</view>

			<view class="tips-box" v-if="orderDetail.status==-6">
				已拒绝退款，请联系平台客服
			</view>

			<view class="steps-box" v-if="step>=0">
				<u-steps :list="stepList" :current="step" active-color="#F97B22"></u-steps>
			</view>
			<view class="steps-box" v-if="orderDetail.status<0">
				<view class="u-p-l-30 u-p-r-30 u-flex" @click="toRefund">
					<view class="u-flex-1">
						<view class="u-font-34 font-medium">取消/退款进度</view>
						<view class="u-tips-color">已申请退款，原因：{{orderDetail.order_info&&orderDetail.order_info.refund_reason ||''}}
						</view>
					</view>
					<u-icon name="arrow-right" size="32" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<!-- 客户 -->
		<view class="page-content">
			<demanAwaitConfirm v-if="step==1" role='user' :info="orderDetail"></demanAwaitConfirm>
			<orderActionPay v-if="step>=2&&step<=4 ||  orderDetail.status<=-4" :info="orderDetail"></orderActionPay>
			<orderActionComplete v-if="showSucess" :orderId="pageId" role="user" type="2"></orderActionComplete>
			<!-- 订单信息 -->
			<view class="u-m-l-30 u-m-r-30 u-m-b-30 radius20 bg-white"
				v-if="orderDetail.order_info&&orderDetail.order_info.order_id ">
				<u-cell-group :border="false">
					<u-cell-item title="交易单号" :arrow="false" :value="orderDetail.order_info.order_id"></u-cell-item>
					<u-cell-item title="下单时间" :arrow="false" :value="orderDetail.order_info.add_time"></u-cell-item>
					<u-cell-item title="付款时间" :arrow="false" :value="orderDetail.order_info.pay_time"
						v-if="orderDetail.order_info.pay_time"></u-cell-item>
				</u-cell-group>
			</view>
		</view>

		<view class="u-p-30 bottom-action" v-if="orderDetail.status>-4 || orderDetail.status<=-6">
			<view class="u-flex ">
				<view class="u-flex-1 u-flex">
					<view class="phone-btn" @click="makePhone" v-if="step==3">
						<text class="iconfont icon-24gf-phoneLoudspeaker"></text>
					</view>
					<view class="phone-btn" @click="toChat" v-if="step==3">
						<text class="iconfont icon-Reply"></text>
					</view>
				</view>
				<u-button type="default" :customStyle="customBtnStyle" plain hover-class="none" shape="circle" v-if="step==1"
					class="action-btn" @click="cancelreplyModal=true">拒绝</u-button>

				<u-button type="default" :customStyle="customBtnStyle" plain hover-class="none" shape="circle"
					v-if="orderDetail.status==1" class="action-btn" @click="cancelOrderModal=true">取消订单</u-button>

				<u-button type="default" :customStyle="customBtnStyle" plain hover-class="none" shape="circle"
					v-if="orderDetail.status<=-6" class="action-btn" @click="toServer">联系客服</u-button>

				<u-button type="warning" :customStyle="{backgroundColor:'#ffffff !important'}" plain hover-class="none"
					shape="circle" v-if="step==1" class="action-btn" @click="agreeHandle">同意对方申请</u-button>

				<u-button type="warning" hover-class="none" plain shape="circle" v-if="orderDetail.status==1"
					@click="showPayType=true" class="action-btn"
					:customStyle="{backgroundColor:'#ffffff !important'}">立即支付￥{{orderDetail.order_info&&orderDetail.order_info.pay_price}}</u-button>

				<u-button type="default" :customStyle="customBtnStyle" plain hover-class="none" shape="circle" v-if="step==3"
					class="action-btn" @click="refundHandle">申请退款</u-button>

				<u-button type="warning" hover-class="none" shape="circle" v-if="orderDetail.status==2" class="action-btn"
					@click="codeModal=true">服务码</u-button>

				<u-button type="warning" :customStyle="{backgroundColor:'#ffffff !important'}" plain hover-class="none"
					shape="circle" v-if="orderDetail.status==3 " class="action-btn"
					@click="$u.toast('订单正在服务中，请等待把关师交付服务')">确认服务</u-button>

				<u-button type="warning" :customStyle="{backgroundColor:'#ffffff !important'}" plain hover-class="none"
					shape="circle" v-if=" orderDetail.status==4" class="action-btn" @click="showConfirmServe=true">确认服务</u-button>

				<u-button type="primary" hover-class="none" shape="circle" plain v-if="orderDetail.status==5" class="action-btn"
					:customStyle="{backgroundColor:'#ffffff !important'}"
					@click="toEvaluation">{{orderDetail.reply_info?'查看评价':'去评价'}}</u-button>
			</view>
		</view>
		<!-- 支付弹窗 -->
		<bb-payment v-model="showPayType" :orderInfo="orderDetail.order_info" @complate="paymentComplate"></bb-payment>

		<!-- 提示弹窗 -->
		<u-modal v-model="cancelreplyModal" @confirm="confirmCancelHandle" ref="confirmModal" :async-close="true"
			content="确定要拒绝申请吗？" show-cancel-button confirm-color="#FFAA44" z-index="9999"></u-modal>
		<u-modal v-model="cancelOrderModal" @confirm="confirmCancelHandle" ref="confirmModal" :async-close="true"
			content="确定要取消订单吗？" show-cancel-button confirm-color="#FFAA44" z-index="9999"></u-modal>
		<u-modal v-model="showRefundModal" @confirm="confirmRefundHandle" ref="confirmModal" title="确定申请退款吗？"
			content="您的订单在服务中，不能全额退款。申请退款提交后，订单转售后，由平台介入审核处理。" show-cancel-button confirm-color="#FFAA44"
			z-index="9999"></u-modal>
		<u-modal v-model="codeModal" ref="codeModal" title="我的服务码" confirm-color="#FFAA44" z-index="9999" mask-close-able>
			<view class="u-font-40 font-bold align-center u-p-t-40 u-p-b-40">
				{{orderDetail.meet_code}}
			</view>
		</u-modal>
		<!-- 选择退款原因 -->
		<u-popup v-model="showRefundReason" mode="bottom" border-radius="20" closeable>
			<view class="u-p-30">
				<view class="u-font-34 font-medium">选择拒绝原因</view>
				<u-cell-group :border="false">
					<u-cell-item :title="item" :arrow="false" v-for="(item,index) in reasons" :key="index"
						@click="selectIndex=index">
						<text class="iconfont" slot="right-icon"
							:class="[selectIndex==index?'icon-chenggong u-type-primary':'icon-yuanxingweixuanzhong']"></text>
					</u-cell-item>
				</u-cell-group>
				<view class="" style="padding: 30rpx 0 90rpx;">
					<u-button type="primary" hover-class="none" shape="circle"
						@click="requestRefund">申请退款￥{{orderDetail.serve_info&&orderDetail.serve_info.price}}</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 确认服务 -->
		<u-popup v-model="showConfirmServe" mode="bottom" border-radius="20" closeable>
			<view class="u-p-30">
				<view class="align-center u-m-b-40 u-font-32 font-medium">确认此次需求把关服务已完成？</view>
				<view @click="$u.route('/pages/subpage/list/dem_detail',{id:orderDetail.demand_info.id})" class="order-view">
					<view class="u-flex-1 u-font-30 font-medium">
						{{orderDetail.demand_info&&orderDetail.demand_info.title}}
					</view>
					<view class="u-type-error">
						￥<text class="u-font-30">{{orderDetail.serve_info&&orderDetail.serve_info.price }}</text>
					</view>
				</view>
				<view class="" style="padding: 30rpx 0 90rpx;">
					<u-button type="primary" hover-class="none" shape="circle" @click="confirmServeHandle">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import demanActionApply from './components/deman-action-apply.vue'
	import demanAwaitConfirm from './components/deman-await-confirm.vue'
	import orderActionComplete from './components/order-action-complete.vue'
	import orderActionPay from './components/deman-order-pay.vue'
	//  step 0:预约   1:待把关师接单  2:付款 3:见面 4:评价
	export default {
		components: {
			orderActionComplete,
			demanActionApply,
			demanAwaitConfirm,
			orderActionPay
		},
		data() {
			return {
				stepList: [{
						name: '申请',
						title: '立即申请'
					},
					{
						name: '需求方确认',
						title: '待确认'
					}, {
						name: '付款',
						title: '待付款'
					}, {
						name: '见面',
						title: '服务中'
					}, {
						name: '评价',
						title: '已完成'
					},
				],
				reasons: ['时间不合适', '地址不合适', '服务内容与需求不符合', '其他原因'],
				selectIndex: 0,
				step: -1,
				customBtnStyle: {
					borderColor: "#cccccc",
					color: '#666666'
				},
				showPayType: false,
				showPassCode: false,
				pageId: '',
				orderDetail: {},
				cancelreplyModal: false,
				cancelOrderModal: false,
				codeModal: false,
				showRefundReason: false,
				showConfirmServe: false,
				showRefundModal: false,
				showSucess: false
			}
		},
		onLoad(e) {
			this.pageId = e.id;
			this.querOrderDetail()
		},
		onPullDownRefresh() {
			this.querOrderDetail()
		},
		methods: {
			querOrderDetail() {
				this.$u.api.demOrderInfoByUser(this.pageId).then(res => {
					uni.stopPullDownRefresh()
					if (res.status < 0 && res.status >= -3) {
						this.$u.toast('订单已失效')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
						return;
					}
					this.orderDetail = res;
					switch (res.status) {
						case 0:
							this.step = 1
							break;
						case 1:
							this.step = 2
							break;
						case 2:
							this.step = 3
							break;
						case 3:
							this.step = 3
							break;
						case 4:
							this.step = 3
							break;
						case 5:
							this.step = 4
							break;
						default:
							this.step = -1
							break;
					}
				})
			},

			// 拒绝
			confirmCancelHandle() {
				this.$u.api.refuseOrder(this.pageId).then(res => {
					this.cancelreplyModal = false
					this.cancelOrderModal = false
					let delta = this.step == 1 ? '-2' : '-1'
					uni.navigateBack({
						delta: delta
					})
				})
			},
			// 同意接单
			agreeHandle() {
				this.$u.api.aggreeOrder(this.pageId).then(res => {
					this.$u.toast('已同意该把关师接单')
					this.querOrderDetail()
				})
			},
			// // 取消订单
			// cancelOrderHandle(){
			// 	this.$u.api.cancelDemOrder(this.pageId).then(res=>{

			// 	})
			// },
			// 联系把关师
			makePhone() {
				const phone = this.orderDetail.phone
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 支付成功
			paymentComplate() {
				this.querOrderDetail()
			},
			// 申请退款
			refundHandle() {
				// this.showRefundReason = true;
				// 判断是否可退
				const payTime = new Date(this.orderDetail.order_info.pay_time).getTime()
				const now = Date.now()
				const leftTime = now - payTime
				if (leftTime < 48 * 60 * 60 * 1000) {
					this.$refs.uToast.show({
						title: '您好，订单已生成，48小时后才能申请退款，请耐心等待把关师服务',
						type: 'default',
						icon: false
					})
				} else {
					if (this.orderDetail.status >= 3) {
						this.showRefundModal = true
					} else {
						this.showRefundReason = true;
					}
				}
			},
			confirmRefundHandle() {
				this.showRefundReason = true
			},
			requestRefund() {
				this.$u.api.demandRefund(this.pageId, {
					reason: this.reasons[this.selectIndex]
				}).then(res => {
					this.$u.toast('退款申请提交成功，请耐心等待1-3个工作日')
					setTimeout(() => {
						this.showRefundReason = false
						this.querOrderDetail()
					}, 800)
				})
			},
			// 确认服务
			confirmServeHandle() {
				this.$u.api.demandFinish(this.pageId).then(res => {
					this.showConfirmServe = false
					this.$u.toast('确认成功，服务已完成')
					this.showSucess = true
					this.querOrderDetail()
				})
			},
			// 退款进度
			toRefund() {
				this.$u.route('/pages/subpage/order/refund', {
					id: this.orderDetail.order_info.id
				})
			},
			// 客服
			toServer() {
				this.$u.route('/pages/subpage/about/service')
			},
			toEvaluation() {
				if (this.orderDetail.reply_info) {
					this.$u.route('/pages/subpage/order/comments', {
						id: this.pageId,
						role: 'user',
						type: 2
					})
				} else {
					this.$u.route('/pages/subpage/order/evaluate', {
						id: this.pageId,
						role: 'user',
						type: 2
					})
				}
			},
			toChat() {
				this.$u.route('/pages/subpage/message/chat', {
					uid: this.orderDetail.serve_info.uid,
					did: this.orderDetail.demand_info.id,
					name: this.orderDetail.serve_info.name
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-view {
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.top {
			background-image: linear-gradient(169deg, #FFAA44 0%, #F97B22 54%, #FF7866 100%);
			background-repeat: no-repeat;
			background-size: cover;
			position: sticky;
			top: 0;
			z-index: 99;
		}

		.steps-box {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding-bottom: 35rpx;
			padding-top: 35rpx;
		}

		.bottom-action {
			position: fixed;
			width: 100%;
			bottom: 0;
			background-color: #fff;
			height: 180rpx;
			z-index: 99;

			.action-btn {
				margin-left: 20rpx;
			}
		}

		.page-content {
			padding-bottom: 180rpx;
			flex: 1;
			height: 0;
			position: relative;
		}

		.tips-box {
			height: 40rpx;
			color: #fff;
			text-align: center;
		}
	}

	.phone-btn {
		display: flex;
		width: 92rpx;
		height: 92rpx;
		border: 1rpx solid #D9D9D9;
		align-items: center;
		justify-content: center;
		color: $u-type-warning;
		font-size: 44rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.order-view {
		display: flex;
		padding: 28rpx;
		border-radius: 20rpx;
		background: #F6F6F6;

		&:before {
			content: "";
			display: inline-block;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #999;
			margin-right: 16rpx;
			margin-top: 16rpx;
		}
	}
</style>